<!-- 详情 -->
<template>
    <div class="drawer-layout">
        <el-drawer :title="title" :visible.sync="drawer" @closed="closeCurrentDrawer" size="60%" :wrapperClosable="false">
            <div class="layout" style="position: relative">
                <div class="product-info">
                    <div class="info-lt">
                        <div class="info-image">
                            <el-image src="" style="width: 70px;height: 70px;border-radius: 5px;" />
                        </div>
                        <div class="info-text">
                            <div>商品名称：<span class="info-name fontWeight600">洋河大曲365</span></div>
                            <div>商品成本：<span class="info-cost fontWeight600">154.14 ￥</span></div>
                        </div>
                    </div>
                    <div class="info-rt info-text">
                        <div>规格名称：<span class="info-rule fontWeight600">默认规格</span></div>
                        <div>商品编码：<span class="info-code fontWeight600">SH145477544514</span></div>
                    </div>
                </div>
                <el-form style="margin-top: 5px;" ref="form" label-position="left" :inline="true" :model="form" size="small"
                    :rules="formrules">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="商品规格" name="first">
                            <el-row :gutter="10" class="mgbottom80">
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item required label="选品状态" prop="status">
                                        <el-radio-group v-model="form.status">
                                            <el-radio :label="1">启用</el-radio>
                                            <el-radio :label="2">禁用</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item required label="平台分类" prop="gc_id">
                                        <el-cascader v-model="form.gc_id" :options="typeDataList" :props="{
                                            expandTrigger: 'hover',
                                            checkStrictly: true,
                                            value: 'id',
                                            label: 'name',
                                        }" placeholder="请选择平台分类"></el-cascader>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="选品库存" prop="inventory">
                                        <el-input type="number" min="0" v-model="form.inventory"
                                            placeholder="请设置选品的库存"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="选品提货券" prop="voucher_price">
                                        <el-input type="number" min="0" v-model="form.voucher_price"
                                            placeholder="请设置选品所需的提货券"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="参考价格" prop="retail_price">
                                        <el-input type="number" min="0" v-model="form.retail_price"
                                            placeholder="划线价格用于对标"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="button-box">
                                <el-button @click="closeCurrentDrawer" class="next-button">取消</el-button>
                                <el-button type="primary" @click="activeName = 'second'" class="next-button">下一步 <i
                                        class="el-icon-caret-right el-icon--right"></i></el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="针对用户规则" name="second">
                            <el-alert style="margin-bottom: 20px;background-color: #F0F8FF;" :closable="false">
                                <div style="display: flex;">
                                    <div style="color:#000000;line-height: 20px;">说明：</div>
                                    <div style=" color:#9A9A9A;line-height: 20px;">当前配置是针对于用户配置的商品展示规则，只有命中以下配置的用户才能看到此商品!
                                        <br />应用场景：商户售卖的奶粉，只让25岁~28岁的女性用户看到。
                                    </div>
                                </div>
                            </el-alert>
                            <el-row :gutter="10">
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="用户分组" prop="nrelated_user_groupame">
                                        <el-select clearable multiple v-model="form.related_user_group" placeholder="请选择分组">
                                            <el-option v-for="item in userGroupList" :key="item.id" :label="item.name"
                                                :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="用户标签" prop="related_user_tag">
                                        <el-select v-model="form.related_user_tag" multiple placeholder="请选择用户标签">
                                            <el-option-group v-for="group in labelList" :key="group.label"
                                                :label="group.category_name">
                                                <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name"
                                                    :value="item.id" />
                                            </el-option-group>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="textareabox">
                                    <el-form-item label="用户区域" prop="area_id" class="form-box-item">
                                        <el-cascader v-model="cascaderRegList" style="width: 100%" :options="regionList"
                                            collapse-tags :props="{
                                                expandTrigger: 'hover',
                                                multiple: true,
                                                value: 'id',
                                                label: 'name',
                                                children: 'children',
                                                checkStrictly: true,
                                            }" clearable />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="textareabox">
                                    <el-form-item label="指定用户" prop="invitation_relationship" class="form-box-item">
                                        <el-select v-model="form.invitation_relationship" style="width: 100%" filterable
                                            multiple remote clearable reserve-keyword placeholder="请输入手机号(查找用户)"
                                            :remote-method="remoteUserMethodWay" :loading="selectLoading">
                                            <el-option v-for="item in userList" :key="item.id"
                                                :label="item.nickname + '(' + item.mobile + ')'" :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="blockquote-box">营销配置</div>
                            <el-row :gutter="10">
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="是否优选推荐" prop="is_recommendation">
                                        <el-radio v-model="form.is_recommendation" :label="1" size="mini">是</el-radio>
                                        <el-radio v-model="form.is_recommendation" :label="0" size="mini">否</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="是否限购" prop="is_restricted">
                                        <el-radio v-model="form.is_restricted" :label="1" size="mini">是</el-radio>
                                        <el-radio v-model="form.is_restricted" :label="0" size="mini">否</el-radio>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" v-if="form.is_restricted == 1">
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="每日限购" prop="daily_purchase_limit">
                                        <el-input v-model="form.daily_purchase_limit"
                                            onkeyup="value=value.replace(/\D/g,'')" placeholder="请输入限购数量" clearable />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                                    <el-form-item label="总限购" prop="total_purchase_limit">
                                        <el-input type="number" v-model="form.total_purchase_limit"
                                            onkeyup="value=value.replace(/\D/g,'')" placeholder="请输入限购数量" clearable />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" class="mgbottom80">
                                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <el-form-item label="销售倍数" prop="total_purchase_limit">
                                        <el-input style="width:180px;" type="number" v-model="form.total_purchase_limit"
                                            onkeyup="value=value.replace(/\D/g,'')" placeholder="请输入最小销售倍数" clearable />
                                        ——
                                        <el-input style="width:180px;" type="number" v-model="form.total_purchase_limit"
                                            onkeyup="value=value.replace(/\D/g,'')" placeholder="请输入最大销售倍数" clearable />
                                        <div class="tip">
                                            例：1-5，销量会乘以1-5随机数
                                        </div>
                                    </el-form-item>
                                </el-col>

                            </el-row>

                            <div class="button-box">
                                <el-button @click="closeCurrentDrawer" class="next-button">取消</el-button>
                                <el-button type="primary" @click="activeName = 'third'" class="next-button">下一步 <i
                                        class="el-icon-caret-right el-icon--right"></i></el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="针对商户规则" name="third">
                            <el-alert style="margin-bottom: 20px;background-color: #F0F8FF;" :closable="false">
                                <div style="display: flex;">
                                    <div style="color:#000000;line-height: 20px;">说明：</div>
                                    <div style=" color:#9A9A9A;line-height: 20px;">当前配置是针对于商户配置的选品展示规则，只有命中以下配置的商户才能看到此商品!
                                        <br />应用场景：指定A商户可见【奶粉】商品。

                                    </div>
                                </div>
                            </el-alert>
                            <el-row :gutter="10">
                                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="textareabox">
                                    <el-form-item label="指定商户" prop="sales_multiplier">
                                        <el-select v-model="form.selection_limit"  class="form-box-item" filterable multiple
                                            remote clearable reserve-keyword placeholder="请输入商户手机号(查找商户)"
                                            :remote-method="remoteMethodWay" :loading="selectLoading">
                                            <el-option v-for="item in MerchantList" :key="item.id" :label="item.name"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="blockquote-box">营销配置</div>
                            <el-row :gutter="10" class="mgbottom80">
                                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <el-form-item label="改价限制类型" prop="change_price_limittype">
                                        <el-radio v-for="(item, index) in [
                                            { tag_value: 1, tag_name: '不限制' },
                                            { tag_value: 2, tag_name: '不可改价' },
                                            { tag_value: 3, tag_name: '需在规定范围内改价' },
                                            { tag_value: 4, tag_name: '只允许增加建议零售价' },
                                            { tag_value: 5, tag_name: '只允许减少建议零售价' },
                                        ]" :key="index" v-model="form.change_price_limit.type" :label="item.tag_value"
                                            size="mini">{{ item.tag_name }}</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"
                                    v-if="form.change_price_limit.type == 3 || form.change_price_limit.type == 5">
                                    <el-form-item label="减少比例" prop="decrement">
                                        <el-input clearable type="number" min="0" maxlength="11" show-word-limit
                                            v-model.trim="decrement" placeholder="请输入可减少比例"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"
                                    v-if="form.change_price_limit.type == 3 || form.change_price_limit.type == 4">
                                    <el-form-item label="可增加比例" prop="increment">
                                        <el-input clearable type="number" min="0" maxlength="11" show-word-limit
                                            v-model.trim="increment" placeholder="请输入可增加比例"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="button-box">
                                <el-button @click="closeCurrentDrawer" class="next-button">取消</el-button>
                                <el-button type="primary" @click="" class="next-button" style="width: 80px;">保存</el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import {
    goodslist,
    supplierLists,
    getGoodsProductList,
    GoodsCateList,
    getSupplierGoodsInfo,
} from "@/api/supplier/index";
//平台分类列表接口
import { getCategoryList } from "@/api/commodity/index";
//用户分组列表接口，用户标签列表接口，区域列表接口，用户列表接口
import { getgroupList, getTagCategoryAll, getRegionList, getUserList, } from "@/api/user/index";
//商户列表接口
import { getMerchantList } from "@/api/merchant/index";
export default {
    name: "detail",
    props: [
        "title",
    ],
    data() {
        return {
            //drawer默认打开
            drawer: true,
            activeName: "first",
            form: {
                status: 1,
                gc_id: '',
                inventory: '',
                voucher_price: '',
                retail_price: '',

                related_user_group: '',
                related_user_tag: '',
                invitation_relationship: [],
                is_recommendation: 1,
                is_restricted: 1,
                daily_purchase_limit: '',
                total_purchase_limit: '',

                selection_limit: [],
                change_price_limit: {
                    type: 1,
                    values: {
                        increment: "",
                        decrement: "",
                    },
                },
            },
            formrules: {},
            //平台分类列表
            typeDataList: [],
            //用户分组列表
            userGroupList: {},
            //用户标签列表
            labelList: [],
            //区域列表
            regionList: [],
            //用户区域
            cascaderRegList: [],
            //下拉框搜索加载
            selectLoading: false,
            //用户列表
            userList: [],
            //商户列表
            MerchantList: [],

            increment: "",
            decrement: "",

        };
    },
    mounted() {
        //获取平台分类列表
        getCategoryList().then((res) => {
            this.typeDataList = res.data;
        });
        //获取用户分组列表
        getgroupList().then((res) => {
            this.userGroupList = res.data.list;
        });
        //获取用户标签列表
        getTagCategoryAll().then((res) => {
            this.labelList = res.data;
        });
        //获取区域列表
        getRegionList().then((res) => {
            this.regionList = res.data;
        });
        //获取用户列表
        getUserList({ page: 1, count: 10 }).then((res) => {
            this.userList = res.data.list;
        });
        //获取商户列表
        getMerchantList({ page: 1, count: 20 }).then((res) => {
            this.MerchantList = res.data.list;
        });

    },
    methods: {
        // 关闭当前抽屉
        closeCurrentDrawer() {
            this.$parent.closeDrawer();
        },
        editorclick(e) {
            this.form.demand = e;
        },
        //指定用户搜索
        remoteUserMethodWay(query) {
            this.selectLoading = true;
            getUserList({
                search_type: 3,
                search_name: query,
                page: 1,
                count: 10,
            }).then((res) => {
                this.selectLoading = false;
                this.userList = res.data.list;
            });
        },
        // 指定商户搜索
        remoteMethodWay(query) {
            if (query !== "") {
                this.selectLoading = true;
                getMerchantList({ page: 1, count: 20, user_cellphone: query }).then(
                    (res) => {
                        this.selectLoading = false;
                        this.MerchantList = res.data.list;
                    }
                );
            }
        },



    },
};
</script>
<style lang="scss">
.drawer-layout {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    // .el-drawer__body {
    //     overflow: auto;
    // }

    /*2.隐藏滚动条，太丑了*/
    .el-drawer__container ::-webkit-scrollbar {
        display: none;
    }

    .el-drawer__header {
        background-color: #409eff;
        color: #ffffff;
        padding: 10px 20px;
        margin-bottom: 10px;
    }
}

.textareabox {
    .form-box-item {
        width: 100%;
        display: flex;

        .el-form-item__content {
            width: 100%;
            flex: 1;
        }
    }

}
</style>
<style lang="scss" scoped>
.layout {
    padding: 10px 20px;

    .fontWeight600 {
        font-weight: 600;
    }

    .product-info {
        border-radius: 5px;
        border: 1px solid #EFEFEF;
        display: flex;
        padding: 10px 20px;
        margin-bottom: 10px;
        font-size: 14px;
        color: #4E5969;

        .info-lt {
            width: 50%;
            display: flex;

            .info-image {
                margin-right: 25px;
            }

            .info-name {
                color: #101010;
            }

            .info-cost {
                color: #BD3124;
            }
        }

        .info-rt {
            width: 50%;

            .info-rule {
                color: #333333;
            }

            .info-code {
                color: #4E5969;
            }
        }

        .info-text {
            height: 35px;
            line-height: 35px;
        }
    }

    .tip {
        font-size: 12px;
        color: #4c4c4c;
    }


}



.blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
}

.button-box {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 60%;
    background: #ffffff;
    padding: 20px;

    .next-button {
        height: 30px;
    }
}

.mgbottom80 {
    margin-bottom: 70px;
}
</style>